<script setup lang="ts">
const code = ref('');
const vertify = ref('1008611');
useSeoMeta({
  title: 'iamcola\' resume.',
});
</script>

<template>
  <div>
    <!-- <div class="flex justify-end items-center">
      <button
        class="px-2 py-2 bg-neutral-700 text-neutral-400 rounded-sm text-sm hover:bg-amber-500 hover:text-neutral-100"
        @click="downloadPDF"
      >下载PDF文件</button>
    </div> -->
    <div v-if="code !== vertify" class="w-full h-full flex flex-col justify-center items-center py-24">
      <h2>访问该页面需要授权码，请输入</h2>
      <input v-model="code" class="mt-6 p-2 rounded-md w-32 text-neutral-800 text-center" type="text">
    </div>
    <Transition name="fade">
      <div v-if="code === vertify" id="resume">
        <h1 class="font-bold text-xl mt-4 pl-2 flex items-center relative after:content after:absolute after:w-1 after:h-5 after:-left-2 after:bg-amber-500">教育背景</h1>
        <div class="flex items-center py-4">
          <div class="font-bold items-center">
            <i class="iconfont icon-shijian"/>
            <span class="ml-2">2015~2018</span>
          </div>
          <div class=" flex-1 font-bold ml-8 flex items-center max-lg:flex-col max-lg:items-end max-lg:ml-4">
            <div class="flex items-center">
              <i class="iconfont icon-jiaoyu"/>
              <span class="ml-2">四川信息职业技术学院</span>
            </div>
            <span class="ml-4">大专</span>
          </div>
        </div>

        <h1 class="font-bold text-xl mt-6 pl-2 flex items-center relative after:content after:absolute after:w-1 after:h-5 after:-left-2 after:bg-amber-500">个人技能</h1>
        <ul class="list-decimal list-inside mt-4 leading-8">
          <li>熟练使用 HTML，CSS，JavaScript，jQuery等技术，熟练ES6+原生语法；</li>
          <li>熟练使用 Vue2，Vue3，Vuex，Pinia等Vue周边技术，了解React的使用；</li>
          <li>熟练使用UniApp开发微信小程序及H5端的应用，对移动端适配有一定的理解；</li>
          <li>熟悉高德/百度地图的使用，了解基于three.js的3D渲染技术；</li>
          <li>熟悉nodejs(express/nestjs...)，mysql，了解nginx，docker等技术；</li>
          <li>能够基于Linux部署项目，熟练使用Git进行项目管理，熟悉敏捷开发流程。</li>
        </ul>

        <h1 class="font-bold text-xl mt-8 pl-2 flex items-center relative after:content after:absolute after:w-1 after:h-5 after:-left-2 after:bg-amber-500">工作经历</h1>
        <div class="py-4">
          <div class="grid grid-cols-4 py-2 border-b border-amber-300 border-dashed">
            <div class="col-span-2 font-bold max-lg:col-span-4">杭州阔知网络科技有限公司</div>
            <div class="font-bold max-lg:col-span-2">2019/03~2020/08</div>
            <div class="flex justify-end items-center max-lg:col-span-2">PHP全栈开发</div>
          </div>
          <div class="grid grid-cols-4 py-2 border-b border-amber-300 border-dashed">
            <div class="col-span-2 font-bold max-lg:col-span-4">成都力之奇有限公司</div>
            <div class="font-bold max-lg:col-span-2">2020/09~2021/11</div>
            <div class="flex justify-end items-center max-lg:col-span-2">Web前端开发</div>
          </div>
          <div class="grid grid-cols-4 py-2 border-b border-amber-300 border-dashed">
            <div class="col-span-2 font-bold max-lg:col-span-4">叭叭（成都）科技有限公司</div>
            <div class="font-bold max-lg:col-span-2">2021/11~2023/09</div>
            <div class="flex justify-end items-center max-lg:col-span-2">Web前端开发</div>
          </div>
          <div class="grid grid-cols-4 py-2 border-b border-amber-300 border-dashed">
            <div class="col-span-2 font-bold max-lg:col-span-4">成都禾能科技有限公司</div>
            <div class="font-bold max-lg:col-span-2">2023/12~2024/07</div>
            <div class="flex justify-end items-center max-lg:col-span-2">Web前端开发</div>
          </div>

          <h1 class="font-bold text-xl mt-8 pl-2 flex items-center relative after:content after:absolute after:w-1 after:h-5 after:-left-2 after:bg-amber-500">项目经历</h1>

      
          <div class="relative after:content border-b border-amber-300 border-dashed pb-4">
            <div class="grid grid-cols-4 mt-6 mb-4">
              <div class="col-span-2 font-bold max-lg:col-span-4">云闪行打车平台</div>
              <div class="font-bold max-lg:col-span-2">2022/09~2023/03</div>
              <div class="flex justify-end items-center max-lg:col-span-2">Web前端开发</div>
            </div>

            <div class="text-neutral-300">
              项目介绍：该项目是基于云闪付平台的一个打车应用，主要为用户提供城内打车服务，除此之外还能进行出租车打车、代价、充电等功能。<br>
              系统包括：H5分享应用，H5核销应用，云闪付小程序应用，Web  端管理应用，商家入驻微信小程序；<br>
              1. 使用<span class="text-amber-300">Vue2</span>及周边生态进行小程序和Web管理端的项目开发；<br >
              2. 使用<span class="text-amber-300">云闪付SDK</span>来完成小程序的API调用；<br >
              3. 使用轮询的方式来进行和后端的通信，以保证打车状态的实时更新；<br >
              4. 使用Echarts进行用户数据的简单统计,使用<span class="text-amber-300">百度/高德地图API</span>来进行地图的显示等功能；<br >
              在线访问：小程序通过云闪付搜索<span class="text-green-400">“云闪行”</span>。
            </div>

            <div class="mt-2">
              <span class="font-bold">主要技术栈：</span>云闪付 SDK，Vue2，Vuex，Element，VantUI，Echarts ，高德/百度 SDK等。
            </div>
          </div>

          <div class="relative after:content border-b border-amber-300 border-dashed pb-4">
            <div class="grid grid-cols-4 mt-6 mb-4">
              <div class="col-span-2 font-bold max-lg:col-span-4">Edusoho平台</div>
              <div class="font-bold max-lg:col-span-2">2019/03~2020/08</div>
              <div class="flex justify-end items-center max-lg:col-span-2">全栈开发</div>
            </div>

            <div class="text-neutral-300">
              项目介绍：Edusoho平台是基于PHP框架Symfony开发的一个平台，主要是以教学业务为主，主要为Web和服务端开发。<br>
              系统包括：基于Web端的服务平台<br >
              主要职责：负责平台的二次<span class="text-amber-300">全栈开发</span>以及后续Bug的修改和维护。<br >
              1. 基于PHP和Sympony框架进行客户的定制需求开发；<br >
              2. 使用HTML/CSS/jQuery来进行前端的开发和数据的请求。
            </div>

            <div class="mt-2">
              <span class="font-bold">主要技术栈：</span>PHP，Mysql，jQuery，Echarts等。
            </div>
          </div>

          <div class="relative after:content border-b border-amber-300 border-dashed pb-4">
            <div class="grid grid-cols-4 mt-6 mb-4">
              <div class="col-span-2 font-bold max-lg:col-span-4">牛小二招聘小程序</div>
              <div class="font-bold max-lg:col-span-2">2023/07~2024/08</div>
              <div class="flex justify-end items-center max-lg:col-span-2">Web前端开发</div>
            </div>

            <div class="text-neutral-300">
              项目介绍：牛小二招聘主要是依托于微信平台的小程序，实现求职/招聘于一体的应用。<br >
              系统包括：Web端管理应用，小程序应用；<br >
              主要职责：基于<span class="text-amber-300">Vue3</span>开发后台管理平台，基于<span class="text-amber-300">Taro</span>开发小程序，。<br >
              1. 参与小程序的开发和后续维护工作，主要为销售部/推广部的业务需求；<br >
              2. 参与管理平台的开发，保证公司人员的正常使用。<br >
              在线访问：<span class="text-green-400">牛小二小程序</span>。<br >
            </div>

            <div class="mt-2">
              <span class="font-bold">主要技术栈：</span>Vue3，Pinia，Taro，React，Echarts，高德/百度SDK等。
            </div>
          </div>

          <h2 class="mt-6 font-bold">还参与过其他很多的短期或者外包项目。</h2>

          <h1 class="font-bold text-xl mt-8 pl-2 flex items-center relative after:content after:absolute after:w-1 after:h-5 after:-left-2 after:bg-amber-500">其他</h1>

          <div class="mt-4">
            <div>获得过计算机一级/二级证书</div>
            <div>热爱学习，热爱编程，有比较强的抗压能力和学习能力！</div>
          </div>
        </div>
      </div>
    </Transition>
  </div>
</template>

<style lang="scss" scoped>
.fade-enter-from, .fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.fade-enter-active, .fade-leave-active {
  transition: all .5s;
}
</style>